<template>
    <div class="login">
      <div class="titleBox">
        <img src="./img/hlogo.png" alt="">
        <div class="title">程 / 序 / 员 / 的 / 梦 / 工 / 厂</div>
      </div>
      <div class="box">
        <h2>账号登录</h2>
        <form @submit.prevent="login" class="login-form">
          <div class="form-group">
            <input type="text" v-model="username" placeholder="邮箱/用户名/手机号" required>
          </div>
          <div class="form-group">
            <input type="password" v-model="password" placeholder="请输入密码" required>
          </div>
          
          <div class="font">忘记密码</div>
          <button type="submit">登录</button>
          <button class="register-button" @click="goToRegister">立即注册</button>
        </form>
        <div v-if="error" class="error-message">{{ error }}</div>
      </div>
      <div class="form-group1">
            <label for="autoLogin">
              <input type="checkbox" id="autoLogin"> 7天内自动登录
            </label>
          </div>``
    </div>
  </template>
  
    
    <script setup lang="ts">
  //   const { ref } = Vue;
  //   const username = ref('');
  //   const password = ref('');
  //   const error = ref('');
    
  //   const login = () => {
  //     // 这里模拟一个简单的登录逻辑
  //     if (username.value === 'admin' && password.value === 'password') {
  //       // 登录成功，可以在这里进行跳转或者其他操作
  //       console.log('登录成功');
  //     } else {
  //       // 登录失败，显示错误消息
  //       error.value = '用户名或密码错误';
  //     }
  //   }
    </script>
    
    <style scoped>
    .login {
      width: 1490px;
      height: 708px;
      background: linear-gradient(to bottom, #0e79c0 50%, #fff 50%);
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top:0;
      left:0;
    }
    
    .box {
    width: 600px;
    height: 400px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px; /* Add rounded corners */
    border: 2px solid #ccc; /* Add border */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
  }
    
    .login-form {
      display: flex;
      flex-direction: column;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    input[type="text"],
    input[type="password"],
    button {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
    
    button {
    width: 300px; /* Adjust width as needed */
    padding: 1p0x; /* Maintain padding */
    font-size: 16px;
    border: none; /* Remove border */
    border-radius: 30px;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-left: 150px; /* Move button to the right */
  }
    
    
    button:hover {
      background-color: #0056b3;
    }
    
    .error-message {
      color: red;
      margin-top: 10px;
    }
  
    .titleBox img {
    width: 70px;
    height: 70px;
  }
    .title {
      color: #ffffff;
      margin-right: -750px;
      margin-top: -30px;
      
    }
  
    .titleBox {
    margin-bottom: 500px; 
  }
  
    .form {
      color:#707070;
      font-size: 12px;
    }
  
    .font{
      color: #707070;
      font-size: 12px;
      margin-top: -1px; /* 向上移动 10 像素 */
      margin-right: -300px;
    }
    
    label {
    margin-left: -850px; /* 调整复选框和文本的左边距 */
  }
  .register-button {
    position: absolute;
    top: 40px; /* 将按钮往下移动 */
    right: 10px;
    background-color: transparent;
    border: none;
    color: white;
    cursor: pointer;
  }
  
  .register-button:hover {
    text-decoration: underline;
  }

    </style>
    